<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>商品列表</title>
    <link href = "css/bootstrap.min.css" rel = "stylesheet" type = "text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
		.input-xlarge{
			height:25px;
		
		}
		
	</style>
  </head>
  
  <body>
    <div class="navbar">
		<div class="navbar-inner">
			<div class="container" style="width: auto;">
				<a class="brand" href="#">商品列表</a>
				<div class="nav-collapse">
					<ul class="nav">
					    <li class="active">
					    	<a href="#">首页</a>
					    </li>
					    <li><a href="#">用户管理</a></li>
				    </ul>
				    <ul class="nav pull-right">
						<li class="divider-vertical"></li>
						<li>
							<a href="#">xx</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
	<table class="table table-striped">
		<thead>
			<tr>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>是否上架</th>
				<th>操作</th>
		  	</tr>
	 	</thead>
	 	<tbody id="goods">
	 		<c:forEach items="${goodsList}" var="goods">
			 		<tr>
						<td>${goods.number}</td>
						<td>${goods.name}</td>
						<td>${goods.price }</td>
						<td>${goods.enable }</td>
						<td>
							<a id="select" class="btn btn-primary" href="javascript:void(0)" rel="${goods.id}"><i class="icon-list icon-white"></i>查看</a>
							<a id="update" class="btn btn-success" href="javascript:void(0)"  rel="${goods.id}"><i class="icon-edit icon-white"></i>编辑</a>
							<a id="del" class="btn btn-danger"  href="javascript:void(0)"  rel="${goods.id}"><i class="icon-trash icon-white"></i>编辑</a>
						</td>
					</tr>
				</c:forEach>
	 	</tbody>
	</table>
	<form name="myForm" class="form-horizontal" action = "" method="post">
	    <fieldset>
		    <legend>添加商品</legend> 
		    
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>商品编号：</a>
			    	<input type="text" class="input-xlarge" id="number" />
			    </div>
		    </div>
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>商品名称：</a>
			    	<input type="text" class="input-xlarge" id="name"/>
			    </div>
		    </div>
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>商品价格：</a>
			    	<input type="text" id="price" class="input-xlarge" onblur=""/>
			    </div>
		    </div>
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>是否上架：</a>
					<input id="yes" type="radio" value="" name="optionsRadios">是
					<input id="no" type="radio" value="" name="optionsRadios">否
			    </div>
		    </div>
		    <div class="form-actions">
				<button class="btn btn-primary" type="button" onClick="sendAjax()"><i class="icon-ok-sign icon-white"></i>保存</button>
				<a class="btn" href="sales.jspx?task=list"><i class="icon-remove-sign"></i>取消</a>
			</div>
	    </fieldset>
    </form>
    </div>
	<script type="text/javascript">
    	var xmlHttp;
    	
    	function createXMLHttpRequest(){
    		if(window.ActiveObject){
    			xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
    		}else{
    			xmlHttp = new XMLHttpRequest();
    		}
    		
    	}
    	function sendAjax(){
    		createXMLHttpRequest();
    		
    		var number = document.getElementById("number").value;
    		var name = encodeURIComponent(document.getElementById("name").value);
    		var price = document.getElementById("price").value;
    		var yes = document.getElementsByName("optionsRadios")[0].checked;
    		var no = document.getElementsByName("optionsRadios")[1].checked;
    		
    		xmlHttp.onreadystatechange = callback;
    			
    		xmlHttp.open("GET", "ajax.jspx?task=save&number="+number+"&name="+name+"&price="+price+"&yes="+yes+"&no="+no, true);
  			xmlHttp.send();
    	}
    	
    	function callback(){
    		if(xmlHttp.readyState == 4){
    			if(xmlHttp.status == 200){
    				var xml = xmlHttp.responseXML;
    				
    				
    				var id = xml.getElementsByTagName("id")[0].childNodes[0].nodeValue;
    				var number = xml.getElementsByTagName("number")[0].childNodes[0].nodeValue;
		    		var name = xml.getElementsByTagName("name")[0].childNodes[0].nodeValue;
		    		var price = xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
		    		var enable =xml.getElementsByTagName("enable")[0].childNodes[0].nodeValue;
		    		
    				var mytr = document.createElement("tr");
    				var mytd1 = document.createElement("td");
    				var text1 = document.createTextNode(number);
    				mytd1.appendChild(text1);
    				
    				var mytd2 = document.createElement("td");
    				var text2 = document.createTextNode(name);
    				mytd2.appendChild(text2);
    				
    				var mytd3 = document.createElement("td");
    				var text3 = document.createTextNode(price);
    				mytd3.appendChild(text3);
    				
    				var mytd4 = document.createElement("td");
    				var text4 = document.createTextNode(enable);
    				mytd4.appendChild(text4);
    				
    				var mytd5 = document.createElement("td");
    				var mya1 = document.createElement("a");
    				var text5 = document.createTextNode("查看");
					mya.setAttribute("href", "javascript:void(0)");
					mya.setAttribute("rel", id);
					mya.setAttribute("id", "select");
					mya.setAttribute("class", "btn btn-primary");
					a.onclick = delRow;
					mya.appendChild(text5);
					
					var mya2 = document.createElement("a");
    				var text6 = document.createTextNode("删除");
					mya2.setAttribute("href", "javascript:void(0)");
					mya2.setAttribute("rel", id);
					mya2.setAttribute("id", "del");
					mya2.setAttribute("class", "btn btn-danger");
					mya2.onclick = delRow;
					mya.appendChild(text6);
					
					mytd5.appendChild(mya1);
					mytd5.appendChild(mya2);
					
    				
    				mytr.appendChild(mytd1);
    				mytr.appendChild(mytd2);
    				mytr.appendChild(mytd3);
    				mytr.appendChild(mytd4);
    				mytr.appendChild(mytd5);
    				document.getElementById("goods").appendChild(mytr);
    				
    			}else {
    				alert("Ajax Erorr!");
    			}
    		}
    	}
    	document.getElementById("del").onclick=delRow;
    	
    	//删除行
	    function delRow() {
	    	document.getElementsByTagName("tbody")[0].removeChild(this.parentNode.parentNode);
	    }
    	
    	$(document).ready(function(){
    		$("td #select").click(function(){
    			createXMLHttpRequest();
    			var id = $(this).attr("rel");
    			
    			xmlHttp.onreadystatechange = findback;
    			
	    		xmlHttp.open("GET", "ajax.jspx?task=find&id="+id, true);
	  			xmlHttp.send();
    		});
    		
    	});	
    	
		function findback(){
    		if(xmlHttp.readyState == 4){
    			if(xmlHttp.status == 200){
    				var xml = xmlHttp.responseXML;
    				
    				
    				var number = xml.getElementsByTagName("number")[0].childNodes[0].nodeValue;
		    		var name = xml.getElementsByTagName("name")[0].childNodes[0].nodeValue;
		    		var price = xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
		    		var enable = xml.getElementsByTagName("enable")[0].childNodes[0].nodeValue;
		    		
		    		document.getElementById("number").value = number;
		    		document.getElementById("name").value = name;
		    		document.getElementById("price").value = price;
		    		if(enable == "true"){
		    			document.getElementById("yes").checked = "checked";
		    		}else if(enable == "false"){
		    			document.getElementById("no").checked = "checked";
		    		}else{
		    			alert("Erorr!");
		    		}
    				
    			}else {
    				alert("Ajax Erorr!");
    			}
    		}
    	}	
    </script>
  </body>
</html>
